<template>
	<div class="f f-a-c f-w-w">
		<div v-for="(item, index) in list" :class="{ act: ind == index, disabl: !item.workStatus }" :key="index" @click="actQie(item, index)" class="hous hand">{{ item.timeStr }}</div>
	</div>
</template>

<script setup>
	import { ref } from "vue";
	let ind = ref(0);
	let list = ref([]);

	const actQie = (item, index) => {
		if (!item.workStatus) {
			return;
		}
		console.log(item, index);
		ind.value = index;
	};

	// 暴露给父组件
	defineExpose({
		ind,
		list
	});
</script>
<style scoped>
	.hous {
		width: 22%;
		margin-right: 4%;
		height: 50px;
		line-height: 50px;
		margin-bottom: 20px;
		border: 2px solid #dddee1;
		border-radius: 8px;
		font-size: 16px;
		font-family: Manrope, Manrope-400;
		font-weight: 500;
		text-align: center;
		color: #02102e;
		&:nth-child(4n) {
			margin-right: 0;
		}
	}
	.act {
		border: 2px solid #02102e;
	}
	.disabl {
		background: #f5f7fa;
	}
</style>
